<template>
  <div>
    <el-affix :offset="76">
      <div style="margin-top: -16px;background-color: #f7f7f7;">&nbsp;</div>
      <div id="commentbox" style="display:flex;background-color: #f7f7f7">
        <div id="user-avatar">
          <div class="avater-logo" style="">
            <div id="canvas">
              <div class="layers">
                <div class="layer center" style="width: 48px; height: 48px; opacity: 1; border-radius: 50%;">
                  <div class="layer-res">
                    <el-avatar :size="48" :src="userStore.userInfo.avatar" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="comment-area">
          <div id="emoji-popover" style="display:none;">
          </div>
          <div id="body">
            <div id="editor" class=" active ">
              <el-input type="textarea" v-model="message.content" :placeholder="placeholder"></el-input>
            </div>
          </div>
          <div id="footer">
            <div id="reply-obj" v-if="replyObj.replyName">
              回复 @{{replyObj.replyName}}
            </div>
            <div id="pub">
              <el-button type="primary" data-v-risk="fingerprint" @click="addMessage">
                发布
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-affix>
    <div id="contents">
      <div id="feed" v-for="item in pager.lists">
        <div id="comment">
          <div id="comment-body" class=" light ">
            <a id="user-avatar" href="javascript:void(0)">
              <div class="avater-logo" style="">
                <div id="canvas" style="">
                  <div class="layers">
                    <div class="layer center" style="width: 48px; height: 48px; opacity: 1; border-radius: 50%;">
                      <div class="layer-res">
<!--                        <ElAvatar :size="48" :src="item.createAvater"></ElAvatar>-->
                        <el-avatar :size="48" :src="item.createAvater" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div id="main">
              <div id="header">
                <div id="info">
                  <div id="user-name">
                    <a href="javascript:void(0)">{{item.createName}}</a>
                  </div>
                </div>
              </div>
              <div id="content">
                <p id="contents">{{item.content}}</p>
              </div>
              <div id="footer">
                <div id="pubdate">{{formattedDate(item.createTime)}}</div>
                <div id="like">
                  <button @click="handleOneLike(item)">
                    <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
                      <path d="M9.283433333333333 2.0303066666666663C9.095466666666667 2.0083933333333333 8.921333333333333 2.09014 8.828166666666666 2.1991199999999997C8.424633333333333 2.6711333333333336 8.332133333333333 3.3649466666666665 8.029333333333334 3.9012466666666663C7.630633333333333 4.607453333333333 7.258833333333333 5.034486666666666 6.800866666666666 5.436006666666666C6.42382 5.7665733333333336 6.042199999999999 5.987959999999999 5.666666666666666 6.09112L5.666666666666666 13.1497C6.19062 13.1611 6.751966666666666 13.168333333333333 7.333333333333333 13.168333333333333C8.831233333333333 13.168333333333333 10.1019 13.120766666666665 10.958166666666665 13.076699999999999C11.565133333333332 13.045433333333332 12.091966666666666 12.7451 12.366466666666668 12.256733333333333C12.7516 11.571599999999998 13.2264 10.5669 13.514166666666664 9.3835C13.7823 8.2808 13.904599999999999 7.374333333333333 13.959466666666666 6.734999999999999C13.984933333333332 6.438646666666667 13.750433333333334 6.166686666666667 13.386666666666665 6.166686666666667L10.065133333333332 6.166686666666667C9.898433333333333 6.166686666666667 9.742666666666667 6.08362 9.649833333333333 5.945166666666666C9.536066666666667 5.775493333333333 9.560033333333333 5.5828533333333334 9.6312 5.403346666666666C9.783966666666666 5.013846666666666 9.983933333333333 4.432846666666666 10.062766666666667 3.90454C10.1406 3.3830066666666667 10.121599999999999 2.9639466666666667 9.917133333333332 2.57626C9.697399999999998 2.1596933333333332 9.448266666666665 2.0495266666666665 9.283433333333333 2.0303066666666663zM10.773433333333333 5.166686666666666L13.386666666666665 5.166686666666666C14.269133333333333 5.166686666666666 15.036999999999999 5.875273333333333 14.9558 6.8206C14.897 7.505533333333333 14.767199999999999 8.462733333333333 14.485833333333334 9.6198C14.170333333333334 10.917200000000001 13.6532 12.008466666666665 13.238166666666666 12.746766666666666C12.7729 13.574433333333333 11.910266666666667 14.029 11.009566666666666 14.075366666666667C10.14 14.120166666666666 8.851766666666666 14.168333333333333 7.333333333333333 14.168333333333333C5.862206666666666 14.168333333333333 4.51776 14.1231 3.565173333333333 14.079633333333334C2.4932333333333334 14.030733333333332 1.5939999999999999 13.234466666666666 1.4786599999999999 12.143466666666665C1.4028 11.426066666666665 1.3333333333333333 10.4978 1.3333333333333333 9.501666666666665C1.3333333333333333 8.588966666666666 1.3916466666666667 7.761233333333333 1.4598999999999998 7.104466666666667C1.5791666666666666 5.95696 2.5641 5.166686666666666 3.671693333333333 5.166686666666666L5.166666666666666 5.166686666666666C5.3793066666666665 5.166686666666666 5.709213333333333 5.063186666666667 6.141613333333333 4.68408C6.516733333333333 4.355193333333333 6.816366666666667 4.015666666666666 7.158533333333333 3.409613333333333C7.5023 2.8007333333333335 7.6041 2.0920066666666663 8.068066666666667 1.54932C8.372133333333332 1.1936466666666665 8.8718 0.9755333333333334 9.399233333333333 1.03704C9.949866666666665 1.10124 10.457733333333334 1.4577866666666666 10.801633333333331 2.109713333333333C11.148866666666665 2.767993333333333 11.143799999999999 3.4356599999999995 11.051833333333335 4.0520933333333335C10.993899999999998 4.44022 10.875366666666666 4.852359999999999 10.773433333333333 5.166686666666666zM4.666666666666666 13.122166666666667L4.666666666666666 6.166686666666667L3.671693333333333 6.166686666666667C3.029613333333333 6.166686666666667 2.5161533333333335 6.615046666666666 2.4545466666666664 7.207833333333333C2.3890599999999997 7.837933333333333 2.333333333333333 8.630433333333333 2.333333333333333 9.501666666666665C2.333333333333333 10.453433333333333 2.399833333333333 11.345266666666667 2.473113333333333 12.038333333333334C2.533993333333333 12.614133333333331 3.0083466666666667 13.053199999999999 3.6107466666666665 13.0807C3.9228066666666668 13.094899999999999 4.278173333333333 13.109333333333334 4.666666666666666 13.122166666666667z" fill="currentColor"></path>
                    </svg>
                    <span id="count">{{item.like}}</span>
                  </button>
                </div>
                <div id="dislike">
                  <button @click="handleDisLike(item)">
                    <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
                      <path d="M9.283433333333333 13.9697C9.095466666666667 13.9916 8.921333333333333 13.909866666666666 8.828166666666666 13.8009C8.424633333333333 13.328866666666666 8.332133333333333 12.635066666666667 8.029333333333334 12.098766666666666C7.630633333333333 11.392566666666667 7.258833333333333 10.9655 6.800866666666666 10.564C6.42382 10.233433333333332 6.042199999999999 10.012033333333333 5.666666666666666 9.908866666666666L5.666666666666666 2.8503266666666662C6.19062 2.83892 6.751966666666666 2.8316799999999995 7.333333333333333 2.8316799999999995C8.831233333333333 2.8316799999999995 10.1019 2.87922 10.958166666666665 2.923313333333333C11.565133333333332 2.9545733333333333 12.091966666666666 3.254906666666667 12.366466666666668 3.74326C12.7516 4.428373333333333 13.2264 5.4331 13.514166666666664 6.616486666666667C13.7823 7.719199999999999 13.904599999999999 8.625666666666666 13.959466666666666 9.265C13.984933333333332 9.561366666666666 13.750433333333334 9.833333333333332 13.386666666666665 9.833333333333332L10.065133333333332 9.833333333333332C9.898433333333333 9.833333333333332 9.742666666666667 9.9164 9.649833333333333 10.054833333333333C9.536066666666667 10.224499999999999 9.560033333333333 10.417133333333332 9.6312 10.596633333333333C9.783966666666666 10.986166666666666 9.983933333333333 11.567166666666667 10.062766666666667 12.095466666666667C10.1406 12.616966666666666 10.121599999999999 13.036066666666665 9.917133333333332 13.423766666666666C9.697399999999998 13.8403 9.448266666666665 13.950466666666665 9.283433333333333 13.9697zM10.773433333333333 10.833333333333332L13.386666666666665 10.833333333333332C14.269133333333333 10.833333333333332 15.036999999999999 10.124733333333332 14.9558 9.1794C14.897 8.494466666666666 14.767199999999999 7.537266666666666 14.485833333333334 6.380213333333334C14.170333333333334 5.08278 13.6532 3.991546666666667 13.238166666666666 3.25324C12.7729 2.425586666666667 11.910266666666667 1.9710199999999998 11.009566666666666 1.9246400000000001C10.14 1.8798599999999999 8.851766666666666 1.8316866666666665 7.333333333333333 1.8316866666666665C5.862206666666666 1.8316866666666665 4.51776 1.8769066666666667 3.565173333333333 1.9203599999999998C2.4932333333333334 1.969253333333333 1.5939999999999999 2.765553333333333 1.4786599999999999 3.856533333333333C1.4028 4.573953333333333 1.3333333333333333 5.502233333333333 1.3333333333333333 6.498353333333332C1.3333333333333333 7.411033333333333 1.3916466666666667 8.238766666666667 1.4598999999999998 8.895533333333333C1.5791666666666666 10.043033333333334 2.5641 10.833333333333332 3.671693333333333 10.833333333333332L5.166666666666666 10.833333333333332C5.3793066666666665 10.833333333333332 5.709213333333333 10.936833333333333 6.141613333333333 11.3159C6.516733333333333 11.644799999999998 6.816366666666667 11.984333333333334 7.158533333333333 12.590399999999999C7.5023 13.199266666666666 7.6041 13.907999999999998 8.068066666666667 14.4507C8.372133333333332 14.806333333333331 8.8718 15.024466666666665 9.399233333333333 14.962966666666667C9.949866666666665 14.898766666666667 10.457733333333334 14.542233333333332 10.801633333333331 13.8903C11.148866666666665 13.232 11.143799999999999 12.564333333333332 11.051833333333335 11.947933333333333C10.993899999999998 11.5598 10.875366666666666 11.147633333333333 10.773433333333333 10.833333333333332zM4.666666666666666 2.8778466666666667L4.666666666666666 9.833333333333332L3.671693333333333 9.833333333333332C3.029613333333333 9.833333333333332 2.5161533333333335 9.384966666666667 2.4545466666666664 8.792166666666667C2.3890599999999997 8.162066666666666 2.333333333333333 7.369566666666666 2.333333333333333 6.498353333333332C2.333333333333333 5.546566666666667 2.399833333333333 4.654719999999999 2.473113333333333 3.96168C2.533993333333333 3.385866666666667 3.0083466666666667 2.946793333333333 3.6107466666666665 2.91932C3.9228066666666668 2.9050866666666666 4.278173333333333 2.8906666666666667 4.666666666666666 2.8778466666666667z" fill="currentColor"></path>
                    </svg>
                    <span id="count">{{item.disLike}}</span>
                  </button>
                </div>
                <div id="reply">
                  <button @click="handleReply(item)">回复</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="replies" v-if="item.replyList&&item.replyList.length>0" v-for="itemChil in item.replyList">
          <div id="expander">
            <div id="expander-contents">
              <div id="main">
                <div id="info">
                  <div id="user-name">
                    <a href="javascript:void(0)">
                      {{itemChil.createName}}<span v-if="itemChil.replyName"> 回复 @{{itemChil.replyName}}</span>
                    </a>
                  </div>
                </div>
                <a id="user-avatar" href="javascript:void(0)">
<!--                  <ElAvatar :size="24" :src="itemChil.createAvater"></ElAvatar>-->
                  <el-avatar :size="24" :src="itemChil.createAvater" />
                </a>
                <p id="contents">{{itemChil.content}}</p>
                <div id="footer">
                  <div id="pubdate">{{formattedDate(itemChil.createTime)}}</div>
                  <div id="like">
                    <button @click="handleOneLike(itemChil)">
                      <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
                        <path d="M9.283433333333333 2.0303066666666663C9.095466666666667 2.0083933333333333 8.921333333333333 2.09014 8.828166666666666 2.1991199999999997C8.424633333333333 2.6711333333333336 8.332133333333333 3.3649466666666665 8.029333333333334 3.9012466666666663C7.630633333333333 4.607453333333333 7.258833333333333 5.034486666666666 6.800866666666666 5.436006666666666C6.42382 5.7665733333333336 6.042199999999999 5.987959999999999 5.666666666666666 6.09112L5.666666666666666 13.1497C6.19062 13.1611 6.751966666666666 13.168333333333333 7.333333333333333 13.168333333333333C8.831233333333333 13.168333333333333 10.1019 13.120766666666665 10.958166666666665 13.076699999999999C11.565133333333332 13.045433333333332 12.091966666666666 12.7451 12.366466666666668 12.256733333333333C12.7516 11.571599999999998 13.2264 10.5669 13.514166666666664 9.3835C13.7823 8.2808 13.904599999999999 7.374333333333333 13.959466666666666 6.734999999999999C13.984933333333332 6.438646666666667 13.750433333333334 6.166686666666667 13.386666666666665 6.166686666666667L10.065133333333332 6.166686666666667C9.898433333333333 6.166686666666667 9.742666666666667 6.08362 9.649833333333333 5.945166666666666C9.536066666666667 5.775493333333333 9.560033333333333 5.5828533333333334 9.6312 5.403346666666666C9.783966666666666 5.013846666666666 9.983933333333333 4.432846666666666 10.062766666666667 3.90454C10.1406 3.3830066666666667 10.121599999999999 2.9639466666666667 9.917133333333332 2.57626C9.697399999999998 2.1596933333333332 9.448266666666665 2.0495266666666665 9.283433333333333 2.0303066666666663zM10.773433333333333 5.166686666666666L13.386666666666665 5.166686666666666C14.269133333333333 5.166686666666666 15.036999999999999 5.875273333333333 14.9558 6.8206C14.897 7.505533333333333 14.767199999999999 8.462733333333333 14.485833333333334 9.6198C14.170333333333334 10.917200000000001 13.6532 12.008466666666665 13.238166666666666 12.746766666666666C12.7729 13.574433333333333 11.910266666666667 14.029 11.009566666666666 14.075366666666667C10.14 14.120166666666666 8.851766666666666 14.168333333333333 7.333333333333333 14.168333333333333C5.862206666666666 14.168333333333333 4.51776 14.1231 3.565173333333333 14.079633333333334C2.4932333333333334 14.030733333333332 1.5939999999999999 13.234466666666666 1.4786599999999999 12.143466666666665C1.4028 11.426066666666665 1.3333333333333333 10.4978 1.3333333333333333 9.501666666666665C1.3333333333333333 8.588966666666666 1.3916466666666667 7.761233333333333 1.4598999999999998 7.104466666666667C1.5791666666666666 5.95696 2.5641 5.166686666666666 3.671693333333333 5.166686666666666L5.166666666666666 5.166686666666666C5.3793066666666665 5.166686666666666 5.709213333333333 5.063186666666667 6.141613333333333 4.68408C6.516733333333333 4.355193333333333 6.816366666666667 4.015666666666666 7.158533333333333 3.409613333333333C7.5023 2.8007333333333335 7.6041 2.0920066666666663 8.068066666666667 1.54932C8.372133333333332 1.1936466666666665 8.8718 0.9755333333333334 9.399233333333333 1.03704C9.949866666666665 1.10124 10.457733333333334 1.4577866666666666 10.801633333333331 2.109713333333333C11.148866666666665 2.767993333333333 11.143799999999999 3.4356599999999995 11.051833333333335 4.0520933333333335C10.993899999999998 4.44022 10.875366666666666 4.852359999999999 10.773433333333333 5.166686666666666zM4.666666666666666 13.122166666666667L4.666666666666666 6.166686666666667L3.671693333333333 6.166686666666667C3.029613333333333 6.166686666666667 2.5161533333333335 6.615046666666666 2.4545466666666664 7.207833333333333C2.3890599999999997 7.837933333333333 2.333333333333333 8.630433333333333 2.333333333333333 9.501666666666665C2.333333333333333 10.453433333333333 2.399833333333333 11.345266666666667 2.473113333333333 12.038333333333334C2.533993333333333 12.614133333333331 3.0083466666666667 13.053199999999999 3.6107466666666665 13.0807C3.9228066666666668 13.094899999999999 4.278173333333333 13.109333333333334 4.666666666666666 13.122166666666667z" fill="currentColor"></path>
                      </svg>
                      <span id="count">{{itemChil.like}}</span>
                    </button>
                  </div>
                  <div id="dislike">
                    <button @click="handleDisLike(itemChil)">
                      <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
                        <path d="M9.283433333333333 13.9697C9.095466666666667 13.9916 8.921333333333333 13.909866666666666 8.828166666666666 13.8009C8.424633333333333 13.328866666666666 8.332133333333333 12.635066666666667 8.029333333333334 12.098766666666666C7.630633333333333 11.392566666666667 7.258833333333333 10.9655 6.800866666666666 10.564C6.42382 10.233433333333332 6.042199999999999 10.012033333333333 5.666666666666666 9.908866666666666L5.666666666666666 2.8503266666666662C6.19062 2.83892 6.751966666666666 2.8316799999999995 7.333333333333333 2.8316799999999995C8.831233333333333 2.8316799999999995 10.1019 2.87922 10.958166666666665 2.923313333333333C11.565133333333332 2.9545733333333333 12.091966666666666 3.254906666666667 12.366466666666668 3.74326C12.7516 4.428373333333333 13.2264 5.4331 13.514166666666664 6.616486666666667C13.7823 7.719199999999999 13.904599999999999 8.625666666666666 13.959466666666666 9.265C13.984933333333332 9.561366666666666 13.750433333333334 9.833333333333332 13.386666666666665 9.833333333333332L10.065133333333332 9.833333333333332C9.898433333333333 9.833333333333332 9.742666666666667 9.9164 9.649833333333333 10.054833333333333C9.536066666666667 10.224499999999999 9.560033333333333 10.417133333333332 9.6312 10.596633333333333C9.783966666666666 10.986166666666666 9.983933333333333 11.567166666666667 10.062766666666667 12.095466666666667C10.1406 12.616966666666666 10.121599999999999 13.036066666666665 9.917133333333332 13.423766666666666C9.697399999999998 13.8403 9.448266666666665 13.950466666666665 9.283433333333333 13.9697zM10.773433333333333 10.833333333333332L13.386666666666665 10.833333333333332C14.269133333333333 10.833333333333332 15.036999999999999 10.124733333333332 14.9558 9.1794C14.897 8.494466666666666 14.767199999999999 7.537266666666666 14.485833333333334 6.380213333333334C14.170333333333334 5.08278 13.6532 3.991546666666667 13.238166666666666 3.25324C12.7729 2.425586666666667 11.910266666666667 1.9710199999999998 11.009566666666666 1.9246400000000001C10.14 1.8798599999999999 8.851766666666666 1.8316866666666665 7.333333333333333 1.8316866666666665C5.862206666666666 1.8316866666666665 4.51776 1.8769066666666667 3.565173333333333 1.9203599999999998C2.4932333333333334 1.969253333333333 1.5939999999999999 2.765553333333333 1.4786599999999999 3.856533333333333C1.4028 4.573953333333333 1.3333333333333333 5.502233333333333 1.3333333333333333 6.498353333333332C1.3333333333333333 7.411033333333333 1.3916466666666667 8.238766666666667 1.4598999999999998 8.895533333333333C1.5791666666666666 10.043033333333334 2.5641 10.833333333333332 3.671693333333333 10.833333333333332L5.166666666666666 10.833333333333332C5.3793066666666665 10.833333333333332 5.709213333333333 10.936833333333333 6.141613333333333 11.3159C6.516733333333333 11.644799999999998 6.816366666666667 11.984333333333334 7.158533333333333 12.590399999999999C7.5023 13.199266666666666 7.6041 13.907999999999998 8.068066666666667 14.4507C8.372133333333332 14.806333333333331 8.8718 15.024466666666665 9.399233333333333 14.962966666666667C9.949866666666665 14.898766666666667 10.457733333333334 14.542233333333332 10.801633333333331 13.8903C11.148866666666665 13.232 11.143799999999999 12.564333333333332 11.051833333333335 11.947933333333333C10.993899999999998 11.5598 10.875366666666666 11.147633333333333 10.773433333333333 10.833333333333332zM4.666666666666666 2.8778466666666667L4.666666666666666 9.833333333333332L3.671693333333333 9.833333333333332C3.029613333333333 9.833333333333332 2.5161533333333335 9.384966666666667 2.4545466666666664 8.792166666666667C2.3890599999999997 8.162066666666666 2.333333333333333 7.369566666666666 2.333333333333333 6.498353333333332C2.333333333333333 5.546566666666667 2.399833333333333 4.654719999999999 2.473113333333333 3.96168C2.533993333333333 3.385866666666667 3.0083466666666667 2.946793333333333 3.6107466666666665 2.91932C3.9228066666666668 2.9050866666666666 4.278173333333333 2.8906666666666667 4.666666666666666 2.8778466666666667z" fill="currentColor"></path>
                      </svg>
                      <span id="count">{{itemChil.disLike}}</span>
                    </button>
                  </div>
                  <div id="reply">
                    <button @click="handleReply(itemChil)">回复</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="div"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import {getMessageDisLike, getMessageLike, getMessageLists, postAddMessage} from "~/api/message";
import {getMemberLists} from "~/api/member";
const userStore = useUserStore()
import {ElAvatar} from "element-plus";
import {useUserStore} from "~/stores/user";
const queryParams = reactive({
  name: [] as any[],
  contact: [] as any[],
  college: [] as any[],
  status: undefined,
  studentNum: [] as any[],
  orgParty: [] as any[]
})
const { data: pager,refresh } = await useAsyncData(() => getMessageLists({
      page_no: 1,
      page_size: 15,
      ...queryParams
    }),
    {
      default: () => ({
        page: 1,
        size: 15,
        loading: false,
        count: 0,
        lists: [] as any[],
        extend: {} as Record<string, any>
    })
})

const message = ref({ content: '' });
const replyObj = ref({replyId: '',replyName: '',parentId: ''});
const placeholder = ref( '请输入留言内容' );

const addMessage = async () => {
  try {
    await postAddMessage({content:message.value.content,replyId: replyObj.value.replyId,replyName: replyObj.value.replyName,parentId: replyObj.value.parentId});
    message.value.content = ''
    replyObj.value.replyName = ''
    replyObj.value.replyId = ''
    replyObj.value.parentId = ''
    placeholder.value = '请输入留言内容'
    refresh();
  } catch (error) {
    console.error('添加留言失败', error);
  }
};


const handleOneLike = async (item) => {
  const res = await getMessageLike({id:item.id})
  item.like = res.like
}

const handleDisLike = async (item) => {
  const res = await getMessageDisLike({id:item.id})
  item.disLike = res.disLike
}

const handleReply = (item) => {
  replyObj.value.replyName = item.createName
  replyObj.value.replyId = item.createId
  replyObj.value.parentId = item.parentId==0?item.id:item.parentId
  placeholder.value = '回复 @'+item.createName
}

const formattedDate = (timestamp:any) => {
  // 创建一个Date对象
  const date = new Date(timestamp*1000);
  // 获取年份
  const year = date.getFullYear();
  // 获取月份，由于 getMonth 返回值是 0 - 11，所以要加 1
  const month = String(date.getMonth() + 1).padStart(2, '0');
  // 获取日期
  const day = String(date.getDate()).padStart(2, '0');
  // 获取小时
  const hours = String(date.getHours()).padStart(2, '0');
  // 获取分钟
  const minutes = String(date.getMinutes()).padStart(2, '0');
  // 获取秒
  const seconds = String(date.getSeconds()).padStart(2, '0');
  // 返回格式化后的日期时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
</script>

<style scoped>
#commentbox {
  flex-shrink: 0;
  transition: height 0.2s;
  height: var(--bili-comments-commentbox-height, auto);
}
#user-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#canvas {
  width: 64;
  height: 64;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.layers {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.layer.center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.layer-res {
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.layer-res div, .layer-res picture, .layer-res img {
  width: 100%;
  height: 100%;
}
.layer-res picture {
 display: inline-block;
}
.avater-logo{
  display: inline-block;
  position: relative;
  width: 48px;
  height: 48px;
}
#editor:hover, #editor.active {
  background-color: var(--bg1);
  border-color: var(--graph_weak);
}

#editor {
  width: 100%;
  padding: 0px 0px;
  border: 1px solid var(--Ga1);
  box-sizing: border-box;
  border-radius: 6px;
  background-color: var(--bg3);
  transition: 0.2s;
  cursor: text;
}
#comment-area {
  position: relative;
  width: calc(100% - 80px);
}
#body {
  width: 100%;
  transition: height 0.2s;
}
#footer {
  position: relative;
  margin-top: 10px;
  display: flex;
  align-items: center;
}
#pub {
  height: 32px;
  width: 60px;
  margin-left: auto;
}
#contents {
  padding-top: 14px;
  position: relative;
}
#comment{
  &-body{
    position: relative;
    padding-left: 80px;
    padding-top: 22px;
    --bili-comment-hover-more-display: none;
    #user-avatar {
      position: absolute;
      left: 20px;
      top: 22px;
      width: 48px;
      height: 48px;
      transform-origin: left top;
      transform: var(--bili-comments-avatar-size);
    }
    #main {
      width: 100%;
      #header {
        margin-bottom: 4px;
        #info {
          display: inline-flex;
          align-items: center;
          #user-name {
            color: var(--bili-comment-user-info-name-color);
            font-size: var(--bili-comments-font-size-name, 13px);
            font-weight: 500;
            a {
              text-decoration: none;
              color: inherit;
            }
          }
        }

      }
      #content {
        font-size: var(--bili-comments-font-size-content);
        line-height: var(--bili-comments-line-height-content);
        color: var(--text1);
        #contents {
          margin-block-start: 0;
          margin-block-end: 0;
          margin-inline-start: 0;
          margin-inline-end: 0;
          display: var(--bili-rich-text-display);
          white-space: var(--bili-rich-text-white-space);
          word-break: var(--bili-rich-text-word-break);
          -webkit-font-smoothing: antialiased;
        }
      }
    }
    #footer{
      #like,#dislike,#reply {
        margin-left: 20px;
        button {
          padding: 0px;
          outline: none;
          border: none;
          background: transparent;
          height: 24px;
          font-size: 13px;
          color: var(--text3);
          display: inline-flex;
          align-items: center;
          cursor: pointer;
        }
        button span {
          margin-left: 5px;
          display: inline-block;
        }
      }
      #dislike{
        margin-left: 20px;
      }
      #reply{
        margin-left: 20px;
      }
    }
  }
}
#expander {
  padding-left: 80px;
  margin-top: 2px;
  #expander-contents {
    position: relative;
    padding: 8px 0px 8px 34px;
    border-radius: 4px;
    #main{
      width: 100%;
      display: block;
      overflow: hidden;
      #info {
        display: inline-flex;
        align-items: center;
        #user-name {
          color: #61666d;
          font-size: 13px;
          font-weight: 500;
          margin-right: 5px;
        }
      }
      #user-avatar {
        position: absolute;
        top: 8px;
        left: 0px;
        width: 24px;
        height: 24px;
        #user-avatar img {
          border-radius: 50%;
        }
      }
      #contents{
        display: inline;
        font-size: 15px;
      }
    }
    #footer{
      #like,#dislike,#reply {
        margin-left: 20px;
        button {
          padding: 0px;
          outline: none;
          border: none;
          background: transparent;
          height: 24px;
          font-size: 13px;
          color: var(--text3);
          display: inline-flex;
          align-items: center;
          cursor: pointer;
        }
        button span {
          margin-left: 5px;
          display: inline-block;
        }
      }
      #dislike{
        margin-left: 20px;
      }
      #reply{
        margin-left: 20px;
      }
    }
  }
}
#div {
  padding-bottom: 14px;
  margin-left: 80px;
  border-bottom: 1px solid #e3e5e7;
}
</style>
